{extend name="index/index"/}

{block name="main"}
<div class="admin-biaogelist">
    <div class="listbiaoti am-cf">
        <ul class="am-icon-flag on"> 订单列表</ul>

        <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">商品列表</a></dl>


        <!--这里打开的是新页面-->
    </div>
    <form class="am-form am-g">
        <table width="100%"  class="am-table am-table-bordered am-table-radius am-table-striped am-table-hover">
            <thead>
            <tr class="am-success">
                <th class="table-id">ID</th>
                <th class="table-title">订单号</th>
                <th class="table-author am-hide-sm-only">购买人</th>
                <th class="table-author am-hide-sm-only">联系方式</th>
                <th class="table-author am-hide-sm-only">邮箱</th>
                <th class="table-author am-hide-sm-only">地址</th>
                <th class="table-author am-hide-sm-only">入住时间</th>
                <th class="table-author am-hide-sm-only">离开时间</th>
                <th class="table-author am-hide-sm-only">房屋名称</th>
                <th class="table-type">购买数量</th>
                <th class="table-type">总价</th>
                <th class="table-date am-hide-sm-only">购买日期</th>
                <th class="table-date am-hide-sm-only">订单状态</th>
                <th width="130px" class="table-set">操作</th>
            </tr>
            </thead>
            <tbody>
            {volist name="order" id="vo"}
            <tr>
                <td>{$vo.id}</td>
                <td><a href="#">{$vo.order_no}</a></td>
                <td>{$vo.input_person_name}</td>
                <td>{$vo.order_phone}</td>
                <td>{$vo.order_email}</td>
                <td>{$vo.house_address}</td>
                <td>{$vo.input_date}</td>
                <td>{$vo.out_date}</td>
                <td>{$vo.house_name}</td>
                <td class="am-hide-sm-only">{$vo.order_num}</td>
                <td class="am-hide-sm-only">{$vo.total_price}</td>
                <td class="am-hide-sm-only">{$vo.order_time}</td>
                <td>{$vo.order_status=='1'?'未支付':'已支付'}</td>
                <td>
                    <div class="am-btn-toolbar">
                        <div class="am-btn-group am-btn-group-xs">
                            <button data-id="{$vo['id']}" class="am-btn am-btn-default am-btn-xs am-text-danger am-round btn_del" title="取消订单"><span  class="am-icon-trash-o " ></span></button>
                        </div>
                    </div>
                </td>
            </tr>
            {/volist}
            </tbody>
        </table>

        <ul class="am-pagination am-fr">
            {$order->render()}
        </ul>
    </form>
</div>

<script>
    $(function(){
        //触发用户的删除操作
        $('.btn_del').click(function(){
            var ac_id = $(this).attr('data-id');
            console.log('删除操作的id为:',ac_id);

            if(confirm('你确定要删除该订单吗？')){
                var obj = $(this).parents('tr');
                console.log(obj);

                //调用ajax进行删除
                delAjax(ac_id,obj);
            }
        });

        //执行ajax删除
        function delAjax(id,obj){
            $.ajax({
                type : 'delete',      //delete 删除方式
                url : '/Order/'+id,
                dataType : 'json',
                success : function(data){

                    console.log(data);
                    if (data.status) {
                        alert(data.info);
                        // 将当前的节点删除掉
                        obj.remove();
                    } else {
                        alert(data.info);
                    }
                },
                error : function(){
                    //ajax操作失败
                    alert('ajax请求失败');
                }


            })
        }

    });

</script>
{/block}